import React, { useEffect, useRef, useState } from 'react'
import './index.css'
import Header from '../../../components/Header'
import { List, ProgressBar, Swiper } from 'antd-mobile'
import duanweiImg from '../../../assets/image/汉堡.png'
import { SwiperRef } from 'antd-mobile/es/components/swiper'


export default function DuanWei() {
    const swiperRef = useRef<SwiperRef>(null)
    const [activeIndex, setActiveIndex] = useState(0)

    useEffect(() => {

    }, [])
    const handleClick = (value: any) => {
        console.log('value', value);

    }

    const res = {
        name: '金牌干饭人',
    }

    const renderMyIndex = () => {
        return (
            <div>
                {/* 个人信息 */}
                <div className='duanwei_touxiang'>
                    <div className='duanwei_touxiang_img'>
                        <img src={duanweiImg} alt="" className='duanweiImg' />
                    </div>
                    <h3>段位：{res.name}</h3>
                    <div className='qianMin'>
                        <ProgressBar percent={50} text />
                    </div>
                </div>
                <div className='duanwei_swiper'>
                    <Swiper
                        direction='horizontal'
                        loop
                        indicator={() => null}
                        ref={swiperRef}
                        defaultIndex={activeIndex}
                        onIndexChange={index => {
                            setActiveIndex(index)
                        }}
                        indicatorProps={{
                            color: 'white',
                        }}
                    >
                        <Swiper.Item>
                            <div className={'content login_card'}>
                                <List mode='card' header='一级会员权益'>
                                    <List.Item onClick={handleClick}>帮助中心</List.Item>
                                </List>
                            </div>
                        </Swiper.Item>
                        <Swiper.Item>
                            <div className={'conten register_cardt'}>
                                <List mode='card' header='二级会员权益'>
                                    <List.Item onClick={handleClick}>帮助中心</List.Item>
                                    <List.Item onClick={handleClick}>关闭服务</List.Item>
                                </List>
                            </div>
                        </Swiper.Item>
                    </Swiper>
                </div>


            </div>
        )
    }


    return (
        <div>
            <Header />
            {renderMyIndex()}

        </div>
    )
}
